<template>
  <div class="import-container">
    <el-dialog
      title="导入探测器"
      :visible.sync="dialogVisible"
      width="630px"
      :before-close="closeAddDialog"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div class="mini-dialog">
        <h3 class="title" style="margin-top: 5px">导入文件编辑注意事项：</h3>
        <div class="import-item">1、 已存在探测器无法导入</div>
        <!-- <div class="import-item">
          2、请在对应单元格填写探测器编码、{{ labelName }}
        </div> -->
        <div class="import-item">
          2、Excel输入单元格内不能出现特殊符号和空格
          <!-- 中文、 -->
        </div>
      </div>

      <div class="content">
        <div>
          <div class="btn-row">
            <el-upload
              ref="upload"
              action="#"
              :limit="1"
              accept=".xls,.xlsx"
              :multiple="false"
              :before-upload="beforeUpload"
              :on-change="handChange"
              :on-exceed="handleExceed"
              :auto-upload="false"
              :http-request="uploadRequest"
            >
              <el-button slot="trigger" size="small" type="primary">
                选取文件
              </el-button>
              <el-button size="small" type="info" @click="handleDownload">
                下载模板
              </el-button>
              <div class="el-upload__tip" slot="tip">
                只能上传Excel文件，且不超过500kb
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          slot="trigger"
          size="small"
          type="primary"
          @click="importStart"
        >
          开始导入
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqDetectorImport } from "@api/api";
import { mapState } from "vuex";

export default {
  name: "",
  props: ["deviceInfo"],
  data() {
    return {
      dialogVisible: false,
      result: {
        total: 0,
        success: 0,
        failed: 0,
        failedList: "",
      },
      isXlsx: true,
      formInline: {
        productId: "",
        classMark: "",
        protocol: "",
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 上传前验证
    beforeUpload(file) {
      let Xls = file.name.split(".");
      if (Xls[1] !== "xls" || Xls[1] !== "xlsx") {
        this.isXlsx = false;
      }
    },
    // 因为 before-upload 是指在文件上传之前、文件已被选中，但还没上传的时候触发，而设置了 :auto-upload=“false” 后，文件上传事件不被再次调用，所以 before-upload 不生效，所以，限制大小的时候，需绑定在 :on-change 里面
    handChange(file) {
      const limitSize = file.size / 1024 / 1024;
      if (limitSize > 0.5) {
        this.$refs.upload.clearFiles();
        this.$modal.notifyWarning("上传文件大小不能超过 500KB!");
        return false;
      }
      let Xls = file.name.split(".");
      if (Xls[1] !== "xls" && Xls[1] !== "xlsx") {
        this.$refs.upload.clearFiles();
        this.$modal.notifyWarning("只能上传Excel文件!");
      }
    },
    handleExceed() {
      this.$modal.notifyWarning(`当前限制选择 1 个文件`);
    },
    // 自定义上传
    async uploadRequest(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      formData.append("parentId", this.deviceInfo.id);
      formData.append(
        "parentDeviceType",
        this.deviceInfo.deviceType || this.deviceInfo.parentDeviceType
      );
      formData.append("parentSpaceId", this.deviceInfo.spaceId);
      formData.append("tenantId", this.user.tenantId);
      formData.append("orgId", this.deviceInfo.orgId);
      // formData.append("belongToPlatform", this.formInline.belongToPlatform);
      const loading = this.$loading({
        lock: true,
        text: "正在导入，请耐心等待~",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });

      const res = await reqDetectorImport(formData);

      loading.close();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.closeAddDialog();
      setTimeout(() => {
        this.$parent.getInit();
      }, 1500);
      this.$modal.notifySuccess("导入成功");
    },
    handleDownload() {
      location.href =
        "https://yliot-oss.oss-cn-shenzhen.aliyuncs.com/2025/05/14/e20ac414882c4ed0b71c3a6eff7bb0ee48fb7392ed3949e0814c97355070c218importTemplate.xlsx";
    },

    // 正式上传
    importStart() {
      this.$refs.upload.submit();
    },
    // 点击关闭大弹框
    closeAddDialog() {
      this.dialogVisible = false;
      this.$refs.upload.clearFiles();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

.mini-dialog {
  margin: 10px 0 20px 24px;
  color: @primaryThemeTxtColor;
}

.el-upload__tip {
  margin-top: 10px;
  color: @primaryThemeTxtColor;
}

.content {
  padding-left: 21px;
  width: 350px;
  position: relative;
  top: 0;
  bottom: 0;
  left: 20px;
  right: 0;

  // 按钮行
  .btn-row {
    .el-button {
      margin-right: 20px;
    }
  }
}

/* mini弹框 */
.title {
  line-height: 30px;
}

.import-item {
  line-height: 24px;
}

::v-deep .el-collapse {
  border: none;
}

::v-deep .el-icon-arrow-right {
  color: @primaryThemeTxtColor;
}

::v-deep .el-input__inner {
  height: 32px !important;
}

form {
  padding-left: 40px !important;
}
</style>
